<template>
  <el-dialog title="观看视频" :visible.sync="dialogVisible" width="80%" :before-close="handleClose" fullscreen>
    <!-- <div>
    <el-button type="primary" @click="aaa">跳过</el-button>
  </div> -->
    <div style="display: flex">

      <div class="company-list">
        <el-card class="box-card" style="position: relative">
          <div v-for="(item, index) in courseList" :key="index">
            <p :class="{ 'highlight': startIndex === index }">{{ item }}</p> <!-- 根据当前播放索引高亮标题 -->
          </div>
        </el-card>
      </div>
      <el-card class="box-card aa">
        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
          :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"
          @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)"
          @loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)"
          @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)"
          @statechanged="playerStateChanged($event)" @ready="playerReadied"></video-player>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
import { getCourseListByExaminationPlanId } from "@/api/train/index.js";

export default {
  data() {
    return {
      dialogVisible: false,
      name: "",
      sectionName: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      courseList: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
          {
            withCredentials: false,
            type: "application/x-mpegURL",
          },
        ],
        poster: "../../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
        autoplay: true,
      },
      startIndex: 0,
      videoUrlList: [],
    };
  },
  created() { },
  methods: {
    aaa() {
      this.$emit("playerEnd");
    },
    show(row) {
      this.dialogVisible = true;
      getCourseListByExaminationPlanId({
        examinationPlanId: row.examinationPlanId,
      }).then((res) => {
        //默认播放第一个
        this.playerOptions.sources[0].src = res.data[0].courseUrl;
        //第一个高亮
        res.data.map((item, index) => {
          this.$nextTick(() => {
            //默认选中第一个
            this.videoUrlList.push(item.courseUrl);
            this.courseList.push(item.courseName);
          });
        });
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.courseList = [];
      this.$refs.videoPlayer.player.pause();
    },
    setCheckedKeys() { },
    resetChecked() { },
    // 播放回调
    onPlayerPlay($event) { },
    // 暂停回调
    onPlayerPause($event) {
      console.log("player pause!", $event);
    },

    // 视频播完回调
    //播放结束进入下一个视频，如果下一个没有视频进去答题页面
    onPlayerEnded($event) {
      //如果当前是最后一个视频，直接进入答题页面
      if (this.startIndex === this.videoUrlList.length - 1) {
        //去答题页面
        this.dialogVisible = false;
        this.courseList = [];
        this.videoUrlList=[];
        this.startIndex = 0;
        this.playerOptions.sources[0].src = ""; // 清空视频源
        this.$emit("playerEnd");
        return;
      }
      //获取下一个视频
      let nextIndex = this.startIndex + 1;
      this.startIndex = nextIndex;
      this.playerOptions.sources[0].src = this.videoUrlList[nextIndex];
    },

    // DOM元素上的readyState更改导致播放停止

    onPlayerWaiting($event) { },

    // 已开始播放回调

    onPlayerPlaying($event) { },

    // 当播放器在当前播放位置下载数据时触发

    onPlayerLoadeddata($event) { },

    // 当前播放位置发生变化时触发。

    onPlayerTimeupdate($event) { },

    //媒体的readyState为HAVE_FUTURE_DATA或更高
    onPlayerCanplay($event) { },

    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。

    onPlayerCanplaythrough($event) { },

    //播放状态改变回调

    playerStateChanged($event) { },

    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
    playerReadied() { },
  },
};
</script>
<style>
.aa {
  width: 80%;
}

.highlight {
  color: red;
  /* 高亮颜色，可以根据需要调整 */
  font-weight: bold;
  /* 加粗字体 */
}
</style>
